@page "/Percent_Stacked_Column_Chart"

<AntDesign.Charts.Column Data=data1 Config="config1" />

<Divider>动手实验</Divider>
<DynamicExample @ref="@example">
    <AntDesign.Charts.Column @ref="@chart" />
</DynamicExample>

@code{

    public IChartComponent chart;
    DynamicExample example;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        example.Chart = chart;
    }

    #region 示例1

    object[] data1 = new object[]
    {
        new
        {
            country = "Asia",
            year = "1750",
            value = 502,
        },
        new
        {
            country = "Asia",
            year = "1800",
            value = 635,
        },
        new
        {
            country = "Asia",
            year = "1850",
            value = 809,
        },
        new
        {
            country = "Asia",
            year = "1900",
            value = 947,
        },
        new
        {
            country = "Asia",
            year = "1950",
            value = 1402,
        },
        new
        {
            country = "Asia",
            year = "1999",
            value = 3634,
        },
        new
        {
            country = "Asia",
            year = "2050",
            value = 5268,
        },
        new
        {
            country = "Africa",
            year = "1750",
            value = 106,
        },
        new
        {
            country = "Africa",
            year = "1800",
            value = 107,
        },
        new
        {
            country = "Africa",
            year = "1850",
            value = 111,
        },
        new
        {
            country = "Africa",
            year = "1900",
            value = 133,
        },
        new
        {
            country = "Africa",
            year = "1950",
            value = 221,
        },
        new
        {
            country = "Africa",
            year = "1999",
            value = 767,
        },
        new
        {
            country = "Africa",
            year = "2050",
            value = 1766,
        },
        new
        {
            country = "Europe",
            year = "1750",
            value = 163,
        },
        new
        {
            country = "Europe",
            year = "1800",
            value = 203,
        },
        new
        {
            country = "Europe",
            year = "1850",
            value = 276,
        },
        new
        {
            country = "Europe",
            year = "1900",
            value = 408,
        },
        new
        {
            country = "Europe",
            year = "1950",
            value = 547,
        },
        new
        {
            country = "Europe",
            year = "1999",
            value = 729,
        },
        new
        {
            country = "Europe",
            year = "2050",
            value = 628,
        },
    };

    ColumnConfig config1 = new ColumnConfig()
    {
        XField = "year",
        YField = "value",
        SeriesField = "country",
        IsPercent = true,
        IsStack = true,
        // Label = new ColumnViewConfigLabel()
        // {
        //     Position = "middle",
        //     Style = new TextStyle()
        //     {
        //         Fill = "#fff"
        //     },
        // }
    };


    #endregion 示例1


}

